<template>
  <div>
    <a-input-group compact>
      <!-- <AutoComplete
        v-bind="$attrs"
        :value="value"
        style="width: calc(100% - 33px)"
        placeholder="请输入"
        :disabled="inputDisabled || disabled"
        @search="handleAddrSearch"
        @select="handleAddrSelect"
      /> -->
      <a-input 
        v-bind="$attrs"
        :value="value"
        style="width: calc(100% - 33px)"
        placeholder="请输入"
        :disabled="inputDisabled || disabled"
        @change="handleChange"
      />
      <a-button style="width:33px" :disabled="disabled" :icon="h(EnvironmentOutlined)" @click="openMap" />
    </a-input-group>
    <amapSelectionModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, h, defineModel, defineEmits, defineProps, computed } from 'vue'
import { AutoComplete } from 'ant-design-vue'
import { EnvironmentOutlined } from '@ant-design/icons-vue'
import { useModal } from '/@/components/Modal';
import amapSelectionModal from './amapSelectionModal.vue'

//注册modal
const [registerModal, { openModal }] = useModal();
const emit = defineEmits(['update:value', 'success']);

const props = defineProps({
  disabled:{
    type: Boolean,
    default: false,
  },
  value:String,
  inputDisabled: {
    type: Boolean,
    default: true,
  },
  params: {
    type: Object,
    default: () => {return {}},
  }
});


watch(() => props.value, (val) => {
  console.log("watch getValue:", val);
}, {deep: true, immediate: true});
function openMap() {
  openModal(true,{});
}
function handleAddrSearch(searchText) {
  console.log("handleAddrSearch:",searchText)
}
function handleAddrSelect(value, option) {
  console.log("handleAddrSelect:",value, option)
}
function handleSuccess(data) {
  console.log("handleSuccess:",data)
  //value.value = data.address;
  //getValue.value = data.address;
  data = {...data, ...props.params};
  emit('update:value', data.address);
  emit('success', data);
}

function handleChange(e){
  let { value } = e.target;
  if(!props.inputDisabled){
    emit('update:value', value);
    emit('success', {address: value, ...props.params});
  }
}
</script>
<style lang="less" scoped></style>
